<template>
  <div class="steps1 clmstart">
    <!-- <div class="stepsbox">
      <div class="stepsinfo maxw">
        <span class="bold">Personal Information</span>
        <div class="line"></div>
        <span>Agenda</span>
        <div class="line"></div>
        <span>Registration Summary</span>
      </div>
    </div> -->
    <div class="title">
      <p class="bigtitle">PERSONAL INFORMATION</p>
      <p class="desc">
        Fill out the information below, then click Next to continue.
      </p>
    </div>
    <div class="stepcontent">
      <div class="stepcontinfo maxw">
        <el-form :model="regForm" :rules="rules" ref="regForm" class="regfrm">
          <!-- Registration Type -->
          <el-form-item class="ritem" prop="regtype">
            <p class="regtitle"><span>*</span>Registration Type</p>
            <el-select v-model="regForm.regtype" class="elitem" placeholder="">
              <el-option
                v-for="item in regtypeopts"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- Job Title -->
          <el-form-item class="ritem" prop="job_title">
            <p class="regtitle"><span>*</span>Job Title</p>
            <el-input v-model="regForm.job_title" placeholder=""></el-input>
          </el-form-item>
          <!-- firstName -->
          <el-form-item class="ritem" prop="firstName">
            <p class="regtitle">
              <span>*</span>First Name (Indicate your first name as on
              ID/passport)
            </p>
            <el-input v-model="regForm.firstName" placeholder=""></el-input>
          </el-form-item>
          <!-- lastName -->
          <el-form-item class="ritem" prop="lastName">
            <p class="regtitle">
              <span>*</span>Last Name (Indicate your first name as on
              ID/passport)
            </p>
            <el-input v-model="regForm.lastName" placeholder=""></el-input>
          </el-form-item>
          <!-- Name on badge -->
          <el-form-item class="ritem" prop="nameOnBadge">
            <p class="regtitle">
              <span>*</span>Name on badge (Indicate your preferred full name to
              be printed on the badge)
            </p>
            <el-input v-model="regForm.nameOnBadge" placeholder=""></el-input>
          </el-form-item>
          <!-- Email Address -->
          <el-form-item class="ritem" prop="email">
            <p class="regtitle"><span>*</span>Email Address</p>
            <el-input v-model="regForm.email" placeholder=""></el-input>
          </el-form-item>
          <!-- Mobile Number -->
          <el-form-item class="ritem" prop="mobile">
            <p class="regtitle"><span>*</span>Mobile Number</p>
            <el-input v-model="regForm.mobile" placeholder=""></el-input>
          </el-form-item>
          <!-- Property Name/Company Name -->
          <el-form-item class="ritem" prop="companyName">
            <p class="regtitle"><span>*</span>Property Name/Company Name</p>
            <el-input v-model="regForm.companyName" placeholder=""></el-input>
          </el-form-item>
          <!-- MARSHA Code -->
          <el-form-item class="ritem" prop="marshaCode">
            <p class="regtitle">
              <span>*</span>MARSHA Code <br />
              (Please complete the MARSHA code of your primary location.
              Partners and sponsors should insert a default code of XXXXX)
            </p>
            <el-input v-model="regForm.marshaCode" placeholder=""></el-input>
          </el-form-item>
          <!-- Nationality -->
          <el-form-item class="ritem" prop="nationality">
            <p class="regtitle"><span>*</span>Nationality</p>
            <el-input v-model="regForm.nationality" placeholder=""></el-input>
          </el-form-item>
          <!-- Market/Area -->
          <el-form-item class="ritem" prop="area">
            <p class="regtitle"><span>*</span>Market/Area</p>
            <el-select v-model="regForm.area" class="elitem" placeholder="">
              <el-option
                v-for="item in areas"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- part 2 -->
          <div class="title">
            <p class="bigtitle">Arrival Details</p>
            <p class="desc">
              If you have not booked your flight yet please complete your
              registration without the details however please update these here
              once you have them.
            </p>
          </div>
          <el-form-item class="ritem">
            <p class="regtitle">Arrival Date</p>
            <el-date-picker
              v-model="regForm.arriva_date"
              type="date"
              placeholder="Arrival Date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              class="arrivdate"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item class="ritem">
            <p class="regtitle">Arrival Time</p>
            <el-input v-model="regForm.arriva_time" placeholder=""></el-input>
          </el-form-item>
          <el-form-item class="ritem">
            <p class="regtitle">Arrival Flight Number</p>
            <el-input v-model="regForm.flight" placeholder=""></el-input>
          </el-form-item>
          <el-form-item class="ritem">
            <p class="regtitle">Arrival Train Number</p>
            <el-input v-model="regForm.train" placeholder=""></el-input>
          </el-form-item>
          <!-- part 3 -->
          <div class="title">
            <p class="bigtitle">Additional Information</p>
          </div>
          <!--Any Allergies  -->
          <el-form-item class="ritem" prop="isAllergies">
            <p class="regtitle">
              <span>*</span>Any Allergies you want to make us aware of?
            </p>
            <el-radio-group v-model="regForm.isAllergies">
              <el-radio label="Yes">Yes</el-radio>
              <el-radio label="No">No</el-radio>
            </el-radio-group>
            <el-input
              v-model="regForm.allergies"
              placeholder="please specify"
              v-show="regForm.isAllergies == 'Yes'"
            ></el-input>
          </el-form-item>
          <!-- Dietary Requirements -->
          <el-form-item class="ritem" prop="dietaryReq">
            <p class="regtitle">
              <span>*</span>Dietary Requirements <br />
              We're making every effort to cater to various dietary
              requirements. While we can't accommodate individual requests,
              we're committed to providing a diverse menu for all attendees.
            </p>
            <el-checkbox-group
              class="dietaryCheck"
              v-model="regForm.dietaryReq"
            >
              <el-checkbox label="Vegetarian"></el-checkbox>
              <el-checkbox label="Vegan"></el-checkbox>
              <el-checkbox label="Halal"></el-checkbox>
              <el-checkbox label="Dairy Free"></el-checkbox>
              <el-checkbox label="Gluten Intolerance"></el-checkbox>
              <el-checkbox label="Other"></el-checkbox>
              <el-input
                type="text"
                v-model="regForm.dietaryOther"
                placeholder="please specify"
                class="specifyipt"
              />
              <el-checkbox label="Not Applicable"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <!-- Marriott Bonvoy Number -->
          <el-form-item class="ritem" prop="mbNumber">
            <p class="regtitle">Marriott Bonvoy Number</p>
            <el-input v-model="regForm.mbNumber" placeholder=""></el-input>
          </el-form-item>
          <!-- part 4 -->
          <div class="title">
            <p class="bigtitle">Invoice Information</p>
          </div>
          <!-- Invoice/fapiao -->
          <el-form-item class="ritem" prop="needInvoice">
            <p class="regtitle">Do you need Invoice/Fapiao?</p>
            <el-radio-group v-model="regForm.needInvoice">
              <el-radio label="Yes">Yes</el-radio>
              <el-radio label="No">No</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- fapiao info -->
          <div class="fapiaoinfo" v-show="regForm.needInvoice == 'Yes'">
            <el-form-item class="ritem">
              <p class="regtitle"><span>*</span>Company Name（名称）</p>
              <el-input v-model="regForm.fpname" placeholder=""></el-input>
              <p class="error" v-show="regForm.fpname == ''">
                Please input Company Name
              </p>
            </el-form-item>
            <el-form-item class="ritem">
              <p class="regtitle">
                <span>*</span>Taxpayer identification number（纳税人识别号）
              </p>
              <el-input v-model="regForm.taxnumber" placeholder=""></el-input>
              <p class="error" v-show="regForm.taxnumber == ''">
                Please input taxpayer identification number
              </p>
            </el-form-item>
            <el-form-item class="ritem">
              <p class="regtitle"><span>*</span>Company Address（单位地址）</p>
              <el-input v-model="regForm.fpaddr" placeholder=""></el-input>
              <p class="error" v-show="regForm.fpaddr == ''">
                Please input Company Address
              </p>
            </el-form-item>
            <el-form-item class="ritem">
              <p class="regtitle"><span>*</span>Telephone（电话）</p>
              <el-input v-model="regForm.telnumber" placeholder=""></el-input>
              <p class="error" v-show="regForm.telnumber == ''">
                Please input Telephone number
              </p>
            </el-form-item>
            <el-form-item class="ritem">
              <p class="regtitle"><span>*</span>Bank Name（开户行）</p>
              <el-input v-model="regForm.bankname" placeholder=""></el-input>
              <p class="error" v-show="regForm.bankname == ''">
                Please input Bank Name
              </p>
            </el-form-item>
            <el-form-item class="ritem">
              <p class="regtitle"><span>*</span>Account Name（银行账号）</p>
              <el-input v-model="regForm.bankaccount" placeholder=""></el-input>
              <p class="error" v-show="regForm.bankaccount == ''">
                Please input Account Name
              </p>
            </el-form-item>
          </div>
          <!-- privacy -->
          <el-form-item class="ritem" prop="privacy">
            <p class="regtitle">
              <span>*</span>
              I acknowledge that my personal data collected in connection with
              the registration and conduct of the event will be processed in
              accordance with the
              <a href="https://www.marriott.com/about/privacy.mi"
                >Marriott Group Global Privacy Statement</a
              >
            </p>
            <el-checkbox
              v-model="regForm.privacy"
              label="I Agree"
            ></el-checkbox>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="btnbox">
      <button type="button" @click="$router.push('/index')">CANCEL</button>
      <button type="button" @click="nextTo('regForm')">NEXT</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      regForm: {
        regtype: "",
        job_title: "",
        firstName: "",
        lastName: "",
        nameOnBadge: "",
        email: "",
        mobile: "",
        companyName: "",
        marshaCode: "",
        nationality: "",
        area: "",
        isAllergies: "",
        allergies: "",
        dietaryReq: [],
        dietaryOther: "",
        mbNumber: "",
        privacy: null,
        needInvoice: "", //
        arriva_date: "",
        arriva_time: "",
        flight: "",
        train: "",
        fpname: "", //发票名称
        taxnumber: "",
        fpaddr: "",
        telnumber: "",
        bankname: "",
        bankaccount: "",
      },
      rules: {
        regtype: [
          {
            required: true,
            message: "Please Choose Registration Type",
            trigger: "change",
          },
        ],
        job_title: [
          {
            required: true,
            message: "Please Input Job Title",
            trigger: "blur",
          },
        ],
        firstName: [
          {
            required: true,
            message: "Please Input Your First Name",
            trigger: "blur",
          },
        ],
        lastName: [
          {
            required: true,
            message: "Please Input Your Last Name",
            trigger: "blur",
          },
        ],
        nameOnBadge: [
          {
            required: true,
            message: "Please Input Your Name on badge",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "Please Input Your Email Address",
            trigger: "blur",
          },
          {
            type: "email",
            message: "Please enter the correct email format",
            trigger: ['blur', 'change']
          },
        ],
        mobile: [
          {
            required: true,
            message: "Please Input Mobile Number",
            trigger: "blur",
          },
        ],
        companyName: [
          {
            required: true,
            message: "Please Input Property Name/Company Name",
            trigger: "blur",
          },
        ],
        marshaCode: [
          {
            required: true,
            message:
              "Please complete the MARSHA code of your primary location. Partners and sponsors should insert a default code of XXXXX",
            trigger: "blur",
          },
        ],
        nationality: [
          {
            required: true,
            message: "Please Input Nationality",
            trigger: "blur",
          },
        ],
        area: [
          {
            required: true,
            message: "Please Choose Market/Area",
            trigger: "change",
          },
        ],
        isAllergies: [
          {
            required: true,
            message: "Please Choose",
            trigger: "change",
          },
        ],
        dietaryReq: [
          {
            required: true,
            message: "Please choose one option at least",
            trigger: "change",
          },
        ],
        privacy: [
          {
            required: true,
            message: "Please agree the Marriott Group Global Privacy Statement",
            trigger: "change",
            validator(rule, value, callback) {
              if (value === true) {
                callback();
              } else {
                callback(new Error("Please agree the Privacy"));
              }
            },
          },
        ],
      },
      regtypeopts: [
        "Marriott GC Hotel HR Leader",
        "Marriott GC Hotel L+D Leader",
        "Marriott GC Continent Office - HR",
        "Marriott GC Continent Office - other discipline",
        "Marriott Headquarter / Global",
        "Conference Partner / Speaker",
        "Conference Sponsor",
        "Committee Member",
      ],
      areas: [
        "Pre-opening",
        "Central & West",
        "Hainan",
        "Hong Kong",
        "Jiangsu & Zhejiang",
        "Luxury",
        "Macau",
        "North",
        "Sands",
        "Shanghai & Suzhou",
        "South",
        "Southeast & Hangzhou",
        "Taiwan",
        "Above Property",
        "Not Applicable",
      ],
    };
  },
  mounted() {
    window.scrollTo(0, 0);
  },
  methods: {
    nextTo(formName) {
      if (this.regForm.needInvoice == "Yes") {
        if (
          this.regForm.fpname == "" ||
          this.regForm.taxnumber == "" ||
          this.regForm.fpaddr == "" ||
          this.regForm.telnumber == "" ||
          this.regForm.bankname == "" ||
          this.regForm.account == ""
        ) {
          return false;
        }
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let info = {
            reg_type: this.regForm.regtype,
            job_title: this.regForm.job_title,
            first_name: this.regForm.firstName,
            last_name: this.regForm.lastName,
            name_on_badge: this.regForm.nameOnBadge,
            email: this.regForm.email,
            phone: this.regForm.mobile,
            property_name: this.regForm.companyName,
            marsha_code: this.regForm.marshaCode,
            nationality: this.regForm.nationality,
            market: this.regForm.area,
            reg_for_yourself: this.regForm.isReg,
            your_first_name: this.regForm.belowFirstName,
            your_last_name: this.regForm.belowLastName,
            your_email: this.regForm.belowEmail,
            any_allergies:
              this.regForm.isAllergies == "Yes"
                ? this.regForm.isAllergies + "/" + this.regForm.allergies
                : this.regForm.isAllergies,
            dietary_req: this.regForm.dietaryReq.includes("Other")
              ? this.regForm.dietaryReq + "/" + this.regForm.dietaryOther
              : this.regForm.dietaryReq,
            marriott_bonvoy_number: this.regForm.mbNumber,
            privacy: this.regForm.privacy, //隐私政策
            arrival_date: this.regForm.arriva_date,
            arrival_time: this.regForm.arriva_time,
            arrival_flight_number: this.regForm.flight,
            arrival_train_number: this.regForm.train,
            is_need_invoice: this.regForm.needInvoice,
            company_name: this.regForm.fpname,
            taxpayer_id: this.regForm.taxnumber,
            company_address: this.regForm.fpaddr,
            company_phone: this.regForm.telnumber,
            bank: this.regForm.bankname,
            bank_account: this.regForm.bankaccount,
          };
          // console.log(info);
          this.$store.commit("setRegInfo", info);
          this.$emit("step1ToStep2", true);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    init(userinfo) {
      // console.log(userinfo);
      if (JSON.stringify(userinfo) !== "{}") {
        let w = userinfo.any_allergies.indexOf("/");
        let isAllergies = "";
        let allergies = "";
        if (w !== -1) {
          isAllergies = userinfo.any_allergies.substring(0, w);
          allergies = userinfo.any_allergies.substring(w + 1, userinfo.length);
        } else {
          isAllergies = userinfo.any_allergies;
        }
        //
        let quelist = userinfo.dietary_req.split(",");
        let dietaryOther = "";
        quelist.some((item) => {
          if (item.includes("Other")) {
            let qitem = item;
            let idx = qitem.indexOf("/");
            if (idx !== -1) {
              dietaryOther = qitem.substring(idx + 1, qitem.length);
              let nitem = qitem.substring(0, idx);
              //替换原数组
              let arr = quelist.toString().replaceAll(item, nitem);
              quelist = arr.split(",");
            }
            return true;
          }
        });
        //
        this.regForm = {
          regtype: userinfo.reg_type,
          job_title: userinfo.job_title,
          firstName: userinfo.first_name,
          lastName: userinfo.last_name,
          nameOnBadge: userinfo.name_on_badge,
          email: userinfo.email,
          mobile: userinfo.phone,
          companyName: userinfo.property_name,
          marshaCode: userinfo.marsha_code,
          nationality: userinfo.nationality,
          area: userinfo.market,
          isAllergies: isAllergies,
          allergies: allergies,
          dietaryReq: quelist,
          dietaryOther: dietaryOther,
          mbNumber: userinfo.marriott_bonvoy_number,
          privacy: true,
          needInvoice: userinfo.is_need_invoice, //
          arriva_date: userinfo.arrival_date,
          arriva_time: userinfo.arrival_time,
          flight: userinfo.arrival_flight_number,
          train: userinfo.arrival_train_number,
          fpname: userinfo.company_name, //发票名称
          taxnumber: userinfo.taxpayer_id,
          fpaddr: userinfo.company_address,
          telnumber: userinfo.company_phone,
          bankname: userinfo.bank,
          bankaccount: userinfo.bank_account,
        };
      }
    },
  },
  watch: {
    "$store.state.reginfo": function (val) {
      // console.log(val);
      this.init(val);
    },
  },
};
</script>
<style lang="less" scoped>
.steps1 {
  height: auto;
  //
  .title {
    margin: 2rem auto 3rem auto;
    p {
      text-align: center;
    }
    .bigtitle {
      font-size: 2.125rem;
      line-height: 1.3;
      font-family: "RidleyBold";
      color: rgb(28, 28, 28);
      font-style: normal;
      text-align: center;
    }
    .desc {
      font-size: 1.125rem;
      padding-bottom: 0.5rem;
      span {
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }
  //内容
  .stepcontent {
    position: relative;
    width: 100%;
    .stepcontinfo {
      .regfrm {
        max-width: 83%;
        margin: auto;
        .ritem {
          margin-bottom: 2rem;
          .regtitle {
            font-family: "RidleyBold";
            font-size: 1.1rem;
            line-height: 1.2;
            padding-bottom: 0.7rem;
            span {
              color: #cc000c;
            }
            a {
              text-decoration: underline;
              color: #0099e0;
            }
          }
          .elitem {
            width: 100%;
          }
          .dietaryCheck {
            .specifyipt {
              width: 300px;
              margin-left: 1.5rem;
            }
          }
        }
        .fapiaoinfo {
          .error {
            position: relative;
            font-size: 1.125rem;
            color: #f56c6c;
            line-height: 1;
            padding-top: 4px;
            top: 100%;
            left: 0;
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 600px) {
  .steps1 {
    .title {
      margin-bottom: 2rem;
      .bigtitle {
        font-size: 1.2rem;
      }
      .desc {
        font-size: 0.7rem;
      }
    }
    .stepcontent {
      .stepcontinfo {
        .regfrm {
          .ritem {
            margin-bottom: 1rem;
            .regtitle {
              font-size: 0.9rem;
            }
          }
          .fapiaoinfo {
            .error {
              font-size: 0.9rem;
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="less">
.steps1,
.steps {
  //按钮
  .btnbox {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5rem auto;
    button {
      width: 160px;
      height: 60px;
      font-size: 1.2rem;
      font-family: "RidleyBold";
      background: none;
      border-style: none;
      border: 1px solid #313335;
      box-sizing: border-box;
      border-radius: 2rem;
      margin: 0 1rem;
      cursor: pointer;
    }
    button:last-child {
      border: none;
      background: #ff9662;
    }
  }
}
@media only screen and (max-width: 600px) {
  .steps1,
  .steps {
    .btnbox {
      button {
        width: 120px;
        height: 40px;
        font-size: 1rem;
      }
    }
  }
}
</style>
<style>
.el-input,
.el-radio__label,
.el-checkbox__label,
.el-form-item__error {
  font-size: 1.125rem !important;
}
.el-input__inner {
  border-color: #313335 !important;
  color: #313335 !important;
}
.el-select .el-input .el-select__caret {
  color: #313335 !important;
}
.el-form-item__error {
  position: relative !important;
}
.el-checkbox {
  display: block !important;
}
@media only screen and (max-width: 600px) {
  .el-input,
  .el-radio__label,
  .el-checkbox__label,
  .el-form-item__error {
    font-size: 0.9rem !important;
  }
}
</style>
